<template>
  <div>
    <m-header :title="title" :showBack="false"></m-header>
    <div class="page-content">
      <div class="content" :class="'sub-bg' + type">
        <h3>注意:不要口吐芬芳！</h3>
        <textarea placeholder="说一个你的密码吧..." v-model="text" maxlength="120"></textarea>
      </div>
      <button class="select-item" :class="'sub-bg' + type" @click="showPop = true" >选择主题</button>
      <button class="fabu" @click="fabu">发布</button>
      <div class="select-type" v-show="showPop">
        <div class="select-bg" @click="showPop = false"></div>
        <ul>
          <li v-for="n in 10" :key="n" @click="selectType(n)">
            <p :class="'sub-bg' + n">
              <img class="theme_img" :src="require('../assets/images/biao/b' + n + '.png')" alt="">
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      title: '发布',
      type: 1,
      showPop: false,
      text: ''
    }
  },
  computed: {
  	...mapState(['userInfo'])
  },
  methods: {
    selectType (n) {
      this.type = n;
      this.showPop = false;
    },
    fabu () {
      if (!this.text) {
        this.$toast('先写点什么吧...');
      } else{
				this.$loading.show();
				this.$http.issue({
					token: this.userInfo.token,
					content: this.text,
					u_id: this.userInfo.id,
					type: this.type
				}).then((res) => {
					this.$loading.hide();
					console.log(res);
					if(res.code === 0){
						this.$toast(res.msg);
						this.text = '';
						setTimeout(()=> {
							this.$router.togo('/mine/my_mimi')
						}, 800);
					} else {
						this.$toast(res.msg);
					}
				})
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page-content{
  .content{
    padding: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 100px);
    padding-bottom: rem(80);
  }
  h3{
    color: $base-color;
    font-size: rem(30);
    font-weight: bold;
    padding-bottom: rem(20);
    border-bottom: 1px $base-color solid;
  }
  textarea{
    width: calc(100% - 24px);
    height: rem(300);
    margin-top: rem(100);
    background: none;
    color: #fff; 
    font-size: rem(30);
    line-height: rem(45);
  }
  textarea::-webkit-input-placeholder {
    color: #eee;
  }
  .select-item{
    margin: rem(40) 0;
    width: rem(160);
    height: rem(70);
    line-height: rem(70);
    border-radius: rem(10);
    font-size: rem(24);
    color: #fff;
  }
  .fabu{
    width: calc(100% - 24px);
  }
  .select-type{
    .select-bg{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.6);
      z-index: 100;
    }
    ul{
      padding: rem(80) 0;
      position: fixed;
      bottom: rem(100);
      left: 0;
      width: 100%;
      z-index: 101;
      background: #343e4a;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      li{
        width: calc(100% / 5);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: rem(20) 0;
        p{
          width: rem(100);
          height: rem(100);
          border-radius: 50%;
          img{
            width: rem(100);
          }
        }
      }
    }
  }

}
</style>
